<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人注册</title>
        <link rel="shortcut icon" href="favicon.ico" >
		<link rel="stylesheet" type="text/css" href="./base.css"/>
		<link rel="stylesheet" type="text/css" href="./register.css"/>
		<script src="./jQuery.min.js"></script>
	</head>
	<body>
			<div class="w">
				<header>
					<div class="logo">
				<h1>
					<a href="index.html" title="品优购商城">品优购商城</a>
				</h1>
			</div>
				</header>
	 			<div class="resisterarea">
					<h3>
						注册新用户
					<div class="login">我有账号，去<a href="login.html" style="color: #c81623;">登录</a></div>
					</h3>
					<div class="tip">
					</div>
					<div class="reg-form">
						<ul>
							<li><label for="">用户名：</label> <input type="text" class="inp name"> <span class="names">请输入正确格式的用户名</span></li>
							<li><label for="">手机号:</label> <input type="tel" class="inp tel"> <span class="tels">请输入正确格式的手机号</span></li>
							<li><label for="">短信验证码:</label> <input type="text" class="inp yan"><input type="button" value="获取验证码" class="msg"></li>
							<li><label for="">登录密码:</label> <input type="password" class="inp mima"> <span class="mimas">请输入登录密码</span></li>
							<li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li>
							<li><label for="">确认密码:</label> <input type="password" class="inp sure"> <span class="sures">请重新确认登录密码</span></li>
							<li class="xieyi"><input type="checkbox" class="yes">同意协议并注册 <a href="#">《知果果用户协议》</a></li>
							<li><input type="submit" value="完成注册" class="btn"></li>
						</ul>
					</div>
				</div>
				<script>
					$(function() {
                     $('.name').blur(function() {
						 if ($('.name').siblings('span').hasClass('error')==true) {
						
                         return;
						 }
						$.ajax({
							url: './_api/checkName.php',
							data:{
								name: $(this).val()
							},
							success: function(data) {
								$('.tip').show()
                             $('.tip').html(data).fadeIn(1000).delay(1000).fadeOut(1000)
							
							}
						})
					 })

					 $('.tel').blur(function() {
						if ($('.tel').siblings('span').hasClass('error')==true) {
						
						return;
						}
						 $.ajax({
							 url:'_api/checkMobile.php',
							 type:'post',
							 data:{
								 mobile:$(this).val()
							 },
							 success:function(data) {
								$('.tip').show()
                             $('.tip').html(data).fadeIn(1000).delay(1000).fadeOut(1000)
							 }
						 })
					 })
					 $('.msg').click(function() {
						if ($('.tel').siblings('span').hasClass('error')) {
                        alert('手机号不存在')
					    return;
						}
						if ($('.msg').hasClass('disable')==true) {
                         alert('嘿，哥们别点了')
						 return;
						}
						
						$('.msg').addClass('disable');
						var num = 60;
						$('.msg').val('还有'+num+'s')
						var timer = setInterval( function() {
							num--
							if (num == 0) {
                           clearInterval(timer);
						   $('.msg').removeClass('disable')
						   $('.msg').val('获取验证码')
						   return;
						}  
							$('.msg').val('还有'+num+'s')
						}, 1000);
						
						$.ajax({
							url:'./_api/code.php',
							data:{
								mobile:$('.tel').val()
							},
							success:function(data) {
							$('.yan').val(data)
							}
						})

					 })

					 $('.btn').click(function() {
						if ($('.yes').is(':checked') == false) {
                        alert('请勾选用户协议')
						return;
						}
						
						$.ajax({
							url:'./_api/register.php',
							type:'post',
							data:{
								name:$('.name').val(),
								mobile:$('.tel').val(),
								pass:$('.mima').val(),
								repass:$('.sure').val(),
								code:$('.msg').val()
							},
							success:function(data) {
                            alert(data)
							}


						})

					 })
					})
				</script>
				<script>
					var reguse = /^[u4E00-u9FA5_a-zA-Z0-9]{3,16}$/
					var regtel = /^1[3|4|5|7|8]\d{9}$/
					var regyan = /^\d{6}$/
					var regpwd = /^[a-zA-Z0-9_-]{6,16}$/
					var use = document.querySelector('.name');
					var uses = document.querySelector('.names');
					var tel = document.querySelector('.tel');
					var yan = document.querySelector('.yan');
					var pwd = document.querySelector('.mima');
					var tels = document.querySelector('.tels');
					var yans = document.querySelector('.yans');
					var pwds = document.querySelector('.mimas');
					var sure = document.querySelector('.sure');
					var sures = document.querySelector('.sures');
					
					regExp(use,reguse,uses);
					regExp(tel,regtel,tels);
					regExp(yan,regyan,yans);
					regExp(pwd,regpwd,pwds);
					
					function regExp(ele, reg, eles) {
						ele.onblur = function() {
						if (reg.test(this.value)) {
							eles.className = 'success'
							eles.innerHTML = '输入正确'
						} else {
							eles.className = 'error'
							eles.innerHTML = '输入错误'
						}
					}
					}
					sure.onblur = function() {
						if (this.value === pwd.value ) {
							sures.className = 'success'
							sures.innerHTML = '输入正确'
						} else {
							sures.className = 'error'
							sures.innerHTML = '两次密码不一样，请重新输入'
						}
					}
					
				</script>
				<!--footer模块start-->
		<div class="footer">
			<div class="w">
				<div class="mod_copyright">
					<div class="links">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li></li>
					<li><a href="#">联系我们</a></li>
					<li></li>
					<li><a href="#">联系客服</a></li>
					<li></li>
					<li><a href="#">商家入驻</a></li>
					<li></li>
					<li><a href="#">营销中心</a></li>
					<li></li>
					<li><a href="#">手机品优购</a></li>
					<li></li>
					<li><a href="#">友情链接</a></li>
					<li></li>
					<li><a href="#">销售联盟</a></li>
					<li></li>
					<li><a href="#">品优购社区</a></li>
					<li></li>
					<li><a href="#">品优购公益</a></li>
					<li></li>
					<li><a href="#">English site</a></li>
					<li></li>
					<li><a href="#">Contact u</a></li>
				</ul>
				</div>
				<div class="copyright">
				<p>地址：北京市昌平区建材城西路金燕龙办公室一层 邮编： 100096 电话：400-618-4000 传真：010-82935100 邮箱 ：zhanghj+itcast.cn
				<br>京 ICP 备08001421 号京公网安备 110108c07702</p>
				</div>
				</div>
			</div>
			</div>
		<!--footer模块end-->
			</div>
	</body>
</html>
